<template>
  <div id="tpl">
    <div class="container">
      <van-swipe>
        <van-swipe-item v-for="image in images" :key="image.index">
          <img :src="image.url" width="100%">
        </van-swipe-item>
      </van-swipe>

      <div id="base" class="box">
        <div id="price">
        <span id="realPrice">
          <span>¥</span><span>{{goodsInfo.price}}</span>
        </span>
          <span id="normalPrice">
          <span id="iconPrice">¥</span><span>{{goodsInfo.channelPrice}}</span>
        </span>
        </div>

        <div id="title">
          {{goodsInfo.name}}
        </div>
        <div id="description">
          {{cutString(goodsInfo.simpleDesc,110)}}
        </div>
      </div>

      <van-cell v-show="!showGoodsSize" title="请选择规格数量" is-link :url="'/#/GoodsSize?yanxuanId=' + goodsId"></van-cell>
      <van-cell v-show="showGoodsSize" :title="'已选择：' + showGoodsSize" is-link
                :url="'/#/GoodsSize?yanxuanId=' + goodsId"></van-cell>
      <van-cell v-show="!address" title="配送地址" is-link url="/#/Address"></van-cell>
      <van-cell v-show="address" :title="'配送：至 ' + address" is-link url="/#/Address"></van-cell>

      <div id="__size">
        <div class="title">
          商品参数
        </div>
        <van-row class="tt">
          <van-col :span="6" class="title">产地</van-col>
          <van-col :span="18" class="content">{{goodsInfo.originCountryName}}</van-col>
        </van-row>
      </div>

      <div id="__content" v-html="goodsInfo.itemDetail.detailHtml">
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-big-btn text="加入购物车" @click="addCart"></van-goods-action-big-btn>
      <van-goods-action-big-btn text="立即购买" @click="pay" primary></van-goods-action-big-btn>
    </van-goods-action>
  </div>
</template>
<script>
  import axios from "axios"
  import {GoodsAction, GoodsActionBigBtn, GoodsActionMiniBtn, Notify, Toast} from 'vant';

  import CartGoods from "../assets/app/module/CartGoods"

  import coreFunc from "../assets/core/func";
  import func from "../assets/app/func";
  import url from "../assets/app/url";

  const GoodsImages = require("../assets/app/module/GoodsImages");
  export default {
    data: function () {
      return {
        goodsId: this.$route.query.yanxuanId,
        images: [],
        showGoodsSize: true,
        cacheGoodsSize: {},
        address: {},
        goodsInfo: {}
      };
    },
    created: function () {
      // func.clearCart();
      axios.get(url.GoodsDetial + "yanxuanId/" + this.$route.query.yanxuanId).then(req => {
        let info = req.data.info;
        let urlList = [];
        if (info.itemDetail.picUrl1) urlList.push(info.itemDetail.picUrl1);
        if (info.itemDetail.picUrl2) urlList.push(info.itemDetail.picUrl2);
        if (info.itemDetail.picUrl3) urlList.push(info.itemDetail.picUrl3);
        if (info.itemDetail.picUrl4) urlList.push(info.itemDetail.picUrl4);
        this.images = GoodsImages(urlList);
        this.goodsInfo = info;

        let prices = [];
        let channelPrices = [];
        info.skuList.forEach(sku => {
          prices.push(sku.price);
          channelPrices.push(sku.channelPrice);
        });
        this.goodsInfo.price = coreFunc.min(prices);
        this.goodsInfo.channelPrice = coreFunc.min(channelPrices);
        let cacheGoodsSize = func.getGoodsSizeCache();
        if (!coreFunc.emptyObj(func.getGoodsSizeCache()) && cacheGoodsSize.goodsId === this.goodsId) {
          let goodsSize = func.getGoodsSizeCache();
          this.goodsInfo.price = goodsSize.realPrice;
          this.goodsInfo.channelPrice = coreFunc.min(channelPrices);
        }
        this.goodsInfo.originCountryName = info.itemDetail.originCountryName;
        this.goodsInfo.detailHtml = info.itemDetail.detailHtml;

        // goodssizeCache
        if (coreFunc.emptyObj(func.getGoodsSizeCache())) {
          this.showGoodsSize = false;
        } else {
          let cacheGoodsSize = func.getGoodsSizeCache();
          if (cacheGoodsSize.goodsId === Number(this.goodsId)) {
            this.showGoodsSize = cacheGoodsSize.skuName;
            this.cacheGoodsSize = cacheGoodsSize;
            this.goodsInfo.price = cacheGoodsSize.realPrice;
          } else {
            this.showGoodsSize = false;
          }
        }

        // addressCache
        if (coreFunc.emptyObj(func.getAddress())) {
          this.address = false
        } else {
          let address = func.getAddress();
          this.address = address.fullAddress
        }
      })
    },
    methods: {
      addCart: function () {
        if (coreFunc.emptyObj(func.getUserinfoCache())) {
          Toast("检测不到帐号");
          return false;
        }
        if (coreFunc.emptyObj(this.cacheGoodsSize)) {
          Notify("请先选择规格");
          return false;
        } else {
          let goodsSize = this.cacheGoodsSize;
          goodsSize.count = 1;
          func.addCartGoods(goodsSize, true);
          Toast("添加完成");
        }
      },
      pay: function () {
        if (coreFunc.emptyObj(func.getUserinfoCache())) {
          Toast("检测不到帐号");
          return false;
        }
        if (coreFunc.emptyObj(this.cacheGoodsSize)) {
          Notify("请先选择规格");
          return false;
        }

        let cartGoods = CartGoods(this.cacheGoodsSize, 1);
        let address = func.getAddress();
        if (coreFunc.emptyObj(address)) {
          Notify("请先选择配送");
          return false;
        }
        func.createOrder([cartGoods], Number(cartGoods.cartGoodsPrice), 1, address);
        this.$router.push({path: "Order"})
      },
      cutString: function (title, length = 14) {
        return coreFunc.cutStr(title, length)
      }
    }
  }
</script>
<style>
  #tpl {
    background-color: #f4f4f4;
  }

  .box {
    padding: 15px;
    background-color: #FFF;
    margin-bottom: 10px;
  }

  #realPrice {
    color: #B4282D;
    font-family: PingFang-SC-Bold;
    font-size: 1.72rem;
    font-weight: 700;
  }

  #normalPrice {
    position: relative;
    color: #999;
    margin-left: .10667rem;
    font-size: .6rem;
  }

  #title {
    padding-top: 5px;
    font-size: 1.0rem;
    margin-bottom: .02667rem;
    font-family: 'Microsoft YaHei';
  }

  #description {
    padding-top: 0px;
    font-size: .32rem;
    line-height: .9rem;
    color: #7f7f7f;
  }

  .tt:first-child {
    border-top: none;
  }

  .tt {
    font-size: 12px;
    line-height: 24px;
    border-top: #e3e3e3 1px dashed;
    background-position: top;
    background-size: 12px 1px;
    background-repeat: repeat-x;
  }

  .tt .title {
    color: #999;
    padding-left: 20px;
  }

  .tt .content {
    color: #333333;
  }

  #__size {
    background-color: #FFF;
    margin: 10px 0;
    padding-top: 10px;
  }

  #__size .title {
    color: #333;
    outline: 0;
    font-family: PingFangSC-Light, helvetica, 'Heiti SC';
    padding-left: 10px;
    padding-bottom: 10px;
  }

  #__content {
    position: relative;
    overflow: hidden;
  }

  #__content p {
    margin: 0;
    padding: 0;
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    -webkit-margin-before: -0.3em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
  }

  #__content p img {
    width: 100%;
    padding: 0;
    margin: 0;
  }
</style>
